<template>
  <div class="box">
    <div class="divForm">
      <el-form label-position="left">
        <el-row>
          <el-col :span="8">
            <el-form-item label="运输任务编号:">
              <el-input v-model="value1" placeholder="请输入" style="width:180px" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="起始地机构:">
              <el-cascader

                v-model="value2"
                :options="treeList"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="目的地机构:">
              <el-cascader
                v-model="value3"
                :options="treeList"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="回车时间:">
              <el-date-picker
                v-model="value4"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆是否可用:">
              <el-select v-model="value5" placeholder="请选择">
                <el-option label="全部" value="1" />
                <el-option label="可用" value="2" />
                <el-option label="不可用" value="3" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item :span="2">
              <el-button type="primary">搜索</el-button>
              <el-button @click="cols">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="divTable">
      <el-table :header-cell-style="{background: '#f4f6f8'}">

        <el-table-column prop="id" label="运输任务编号" width="200px" />
        <el-table-column prop="name" label="起始地机构" width="150px" />
        <el-table-column prop="num" label="运单数量" />
        <el-table-column prop="allowableLoad" label="出车时间" width="100px" />
        <el-table-column prop="allowableVolume" label="回车时间" width="200px" />
        <el-table-column prop="measureLong" label="车牌号码" />
        <el-table-column prop="measureWidth" label="车辆是否可用" />
        <!-- 操作 -->
        <el-table-column label="操作" width="150px">
          <template>
            <!-- <p>{{ row }}</p> -->
            <el-button size="mini" type="text">编辑</el-button>
            <el-popconfirm title="确认删除该行数据吗？">
              <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

    </div>

  </div>

</template>

<script>
import { getTreeList, keyNameWithLabelInArray } from '../api/enroll'

export default {
  components: {

  },
  data() {
    return {
      treeList: [],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: ''

    }
  },
  created() {
    this.getTreeList()
  },

  methods: {
    async getTreeList() {
      const res = await getTreeList()
      this.treeList = keyNameWithLabelInArray(JSON.parse(res.data))
    },
    cols() {
      this.value1 = ''
      this.value2 = ''
      this.value3 = ''
      this.value4 = ''
      this.value5 = ''
    }

  }
}
</script>

<style lang="scss" scoped>
.box{
  background-color: #f3f4f7;
  padding: 20px;
  .divForm{
    padding: 20px 40px;
    background-color: #fff;
  }
  .divTable{
    margin-top: 20px;
     padding: 30px ;
    background-color: #fff;

  }
}
.inputW{
  width: 290px;
}
</style>

